/*
* @Author: yyf
* @Create: 2018/4/12
* @description: 事件——投资方组件
*/
<template>
    <div class="custom-box p-20">
        <el-row class="custom-title m-t-20 m-b-20">
            <h3>投资方</h3>
            <button type="button"
                @click="addInvestor('-1')"
                class="custom-btn custom-btn-round m-l-10">
                <i class="fa fa-plus"></i>
            </button>
        </el-row>
        <el-table :data="eventInvestSearchData">
            <el-table-column label="ID" prop="id" width="70px"></el-table-column>
            <el-table-column label="投资方名称" prop="investName"></el-table-column>
            <el-table-column label="投资方类型" prop="businessType">
                <template slot-scope="scope">
                    {{scope.row.businessType | getDicNameById('companyIdentity')}}
                </template>
            </el-table-column>
            <el-table-column label="实际投资金额" prop="investMoney">
                <template slot-scope="scope">
                    {{scope.row.investMoney}}{{scope.row.currencyType|getDicNameById('currencyType')}}
                </template>
            </el-table-column>
            <el-table-column label="交易股权" prop="stock"></el-table-column>
            <el-table-column label="交易股权(后)" prop="stockAfter" v-if="eventType === 17"></el-table-column>
            <el-table-column label="是否取得控制权" prop="controlStatus" width="70px" v-if="eventType === 17">
                <template slot-scope="scope">
                    {{scope.row.controlStatus | getDicNameById('whether')}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
                <template slot-scope="scope">
                    <el-button type="text" @click="addInvestor('1', scope.row)">编辑</el-button>
                    <el-button type="text" @click="relevance(1, scope.row)" v-if="scope.row.status!==1">关联</el-button>
                    <el-button type="text" @click="relevance(2, scope.row)" v-if="scope.row.status===1">取消关联</el-button>
                    <el-button type="text" @click="deleteEventInvest(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="investorDialog" :title="titleName">
            <el-tabs @tab-click="selectTab" :value="tabIndex">
                <el-tab-pane label="机构">
                    <div v-if="tabIndex==='0'">
                        <InvestFormDialog
                            @closeDialog="closeDialog"
                            :eventInvestDto="eventInvestDto"
                            :eventType="eventType"
                            formTitle="org">
                        </InvestFormDialog>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="投资人">
                    <div v-if="tabIndex==='1'">
                        <InvestFormDialog
                            @closeDialog="closeDialog" 
                            :eventInvestDto="eventInvestDto"
                            :eventType="eventType"
                            formTitle="investor">
                        </InvestFormDialog>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="企业">
                    <div v-if="tabIndex==='2'">
                        <InvestFormDialog 
                            @closeDialog="closeDialog" 
                            :eventInvestDto="eventInvestDto"
                            :eventType="eventType"
                            formTitle="enterprise">
                        </InvestFormDialog>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { EventInvestDto, CompanyOpenSearchVO } from '../../../api/Interface';
import EventInvestorService from '../../../service/event/investor/index';
import { EventPublicSearchDto } from '../../../service/event/Interface';
import InvestFormDialog from './formDialog.vue';
@Component({
    components: {
        InvestFormDialog, // 投资人、企业弹框
    }
})
export default class Investor extends Vue {
    @Prop({default: 16})
    public eventType: number; // 16 新股发行， 17 投资事件
    // 初始化数据
    public eventPublicSearchDto: EventPublicSearchDto = {} as EventPublicSearchDto; // 投资方列表参数
    public eventInvestSearchData: Array<EventInvestDto> = []; // 投资方列表
    public companyOpenSearch: CompanyOpenSearchVO = {} as CompanyOpenSearchVO; // 企业信息
    public eventInvestDto: EventInvestDto = {} as EventInvestDto; // 投资方添加Dto
    public eventId: string = ''; // 地址栏ID
    public tabIndex: string = '0'; // 0:机构; 1:投资人; 2:企业； 
    public titleName: string = ''; // 弹出框标题
    public investorDialog: boolean = false; // 投资方弹框
    public enterpriseDialog: boolean = false;  // 企业信息弹框
    public isAdd: boolean = false;  // 添加：true, 修改：false

    // public $refs: {
    //     investFormDialog: HTMLFormElement;
    // };

    // 声明周期钩子
    public mounted() {
        this.eventId = this.$route.params.eventId;
        this.getEventInvestorList();
    }
    // 获取投资方列表
    public async getEventInvestorList() {
        this.eventPublicSearchDto['pageParam.pageIndex'] = 1;
        this.eventPublicSearchDto['pageParam.pageParam'] = 10;
        this.eventPublicSearchDto.eventId = this.eventId;
        const res = await EventInvestorService.getInvestorEventList(this.eventPublicSearchDto);
        if (res.resCode === '0') {
            this.eventInvestSearchData = res.data.resultData;
        }
    }
    public selectTab(tab: {index: string}) {
        this.tabIndex = tab.index;
    }
    public closeDialog(isGetPage: boolean) {
        this.investorDialog = false;
        if (isGetPage) {
            this.getEventInvestorList();
        }
    }
    // 添加/修改投资方
    public addInvestor(num: string, info: EventInvestDto) {
        // 清空
        this.eventInvestDto = {} as EventInvestDto;
        this.eventInvestDto.orgPersonIds = [];
        this.eventInvestDto.fundPersonIds = [];
        this.investorDialog = true;
        if (num === '-1') { // 添加
            this.isAdd = true;
            this.titleName = '投资方/添加投资方';
        } else { // 修改
            this.isAdd = false;
            this.titleName = '投资方/修改投资方';
            this.eventInvestDto = info;
            switch (info.businessType) {
                case 2: 
                    this.tabIndex = '0';
                    break;
                case 15: 
                    this.tabIndex = '1';
                    break;
                case 1: 
                    this.tabIndex = '2';
                    break;
                default: 
                    this.tabIndex = '0';
                    break;
            }
        }
    }
    // 删除投资方
    public deleteEventInvest(id: number) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
            const res = await EventInvestorService.deleteEventInvest(id);
            if (res.resCode === '0') {
                this.$message.success('删除成功！');
                this.getEventInvestorList();
            }
        });
    }
    // 关联
    public relevance(num: number, item: EventInvestDto) {
        const message = num === 1 ? '确定信息关联？' : '取消信息关联？';
        const info = num === 1 ? '信息关联成功！' : '取消信息关联成功！';
        this.$confirm(message, '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
        }).then( async () => {
            item.status = num;
            const {resCode} = await EventInvestorService.updateEventInvest(item);
            if (resCode === '0') {
                this.$message.success(info);
                this.getEventInvestorList();
            }
        });
    }
    // 查询企业名称
    public getEnterprise() {
        this.enterpriseDialog = true;
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
